<template>
	<view class="page-wrap">
		<view class="char-plate" v-for="(item, i) in list" :key="i">
			<view class="char-plate-title" @click="item.show = !item.show">
				<view class="char-plate-title-left">
					<view class="">
						{{item.title}}
					</view>
					<uni-icons type="down" class="#A6A6A6" size="20"></uni-icons>
				</view>
				<view class="char-plate-title-right">
					<switch style="transform: scale(.8);" :checked="item.checked" color="#EE5953" @change="e => switchChange(e, i)" />
				</view>
			</view>
			<view class="expand-content" v-if="item.show">
				<view class="qiun-charts">
					<l-echart :ref="item.ref" @finished="e => barInit(e, item.ref)"></l-echart>
				</view>
				<view class="describe">
					{{item.describe}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/utils/echarts.min.js';
	export default {
		data() {
			return {
				checked1: true,
				list: [
					{
						title: '委托线',
						describe: '委托线一般在调整委托价格时出现，闪电下单功能中可通过拖动调整价格，交易页面暂时不支持拖动改价。',
						checked: true,
						barChart: 'barChart1',
						ref: 'echart1',
						show: true
					},{
						title: '挂单线',
						describe: '委托线一般在调整委托价格时出现，闪电下单功能中可通过拖动调整价格，交易页面暂时不支持拖动改价。',
						checked: true,
						barChart: 'barChart2',
						ref: 'echart2',
						show: false
					},{
						title: '持仓线',
						describe: '委托线一般在调整委托价格时出现，闪电下单功能中可通过拖动调整价格，交易页面暂时不支持拖动改价。',
						checked: true,
						barChart: 'barChart3',
						ref: 'echart3',
						show: false
					},{
						title: '止盈止损线',
						describe: '委托线一般在调整委托价格时出现，闪电下单功能中可通过拖动调整价格，交易页面暂时不支持拖动改价。',
						checked: true,
						barChart: 'barChart4',
						ref: 'echart4',
						show: false
					},{
						title: '云条件单线',
						describe: '委托线一般在调整委托价格时出现，闪电下单功能中可通过拖动调整价格，交易页面暂时不支持拖动改价。',
						checked: true,
						barChart: 'barChart5',
						ref: 'echart5',
						show: false
					}
				]
			};
		},
		methods: {
			switchChange(val, i) {
				console.log(val, i)
			},

			// 初始化图表
			barInit(e, ref) {
				this.barOption = {
					color: ['#356FE5'],
					backgroundColor: "#ffffff",
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'value',
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false,
						},
						boundaryGap: false
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false,
						}
					},
					grid: {
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
					},
					series: [{
						data: [
							[0, 87],
							[100, 123],
							[90, 150],
							[138, 187],
						],
						type: 'line',
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#B2C8F5' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#DAE5FA' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							},
							'series-line': {
								itemStyle: {
									borderJoin: 'round'
								}
							}
						},
						symbol: "none",
						smooth: true
					},{
						data: [
							[0, 77],
							[59, 80],
							[100, 113],
							[118, 157],
						],
						type: 'line',
						symbol: "none",
						color: '#FEA306',
					}]
				};
				this.$refs[ref][0].init(echarts, chart => {
					chart.setOption(this.barOption);
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5F7;
	}

	.char-plate {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 26rpx auto;
		padding-bottom: 32rpx;
		.char-plate-title {
			height: 106rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			border-bottom: 2rpx solid #F5F5F5;

			.char-plate-title-left {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.8);
				display: flex;
				align-items: center;

				.uni-icons {
					margin-left: 10rpx;
				}
			}
		}

		.qiun-charts {
			height: 276rpx;
			width: 622rpx;
			margin: 27rpx auto;
		}
		.describe {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			color: rgba(0,0,0,0.8);
			padding: 0 32rpx;
		}
	}
</style>